.top-bar {
  display: flex;
  width: 100vw;
  height: 88rpx;
  padding: 17rpx 32rpx;
  box-sizing: border-box;
  align-items: flex-end;
  justify-content: space-between;

  .tabs-bar {
    flex: 1;
  }
  .search-bar {
    width: 53%;
  }
}

.card-list {
  height: calc(100vh - 100rpx);
  box-sizing: border-box;

  .card-item {
    width: 100%;
    padding: 24rpx;
    font-size: 24rpx;
    color: $uni-text-color;
    border-bottom: 1rpx solid #ededed;
    box-sizing: border-box;

    .top {
      display: flex;
      align-items: center;
      .order-number {
        margin-right: 10rpx;
        font-weight: bold;
      }
    }

    .middle {
      display: flex;
      width: 100vw;
      padding: 26rpx 0;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;

      .img-list {
        width: 606rpx;
        height: 180rpx;
        white-space: nowrap;
        align-items: center;
        // box-sizing: border-box;
        .img-item {
          display: inline-block;
          width: 180rpx;

          /* 设置图片的宽度 */
          height: 180rpx;
          margin-right: 24rpx;
          overflow: hidden;

          /* 设置图片的高度 */
          border-radius: 12rpx;

          img {
            width: 100%;

            /* 设置图片宽度为100% */
            height: 100%;

            /* 设置图片高度为100% */
            object-fit: cover;

            /* 图片按比例缩放并保持宽高比 */
          }
        }
      }

      .img-number {
        text-align: left;
        flex: 1;
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .more {
        display: flex;
        color: #999;
        align-items: center;

        img {
          width: 30rpx;
          height: 30rpx;
          margin-right: 7rpx;
        }
      }

      .button-list {
        .bottom {
          display: inline-block;
          padding: 16rpx 24rpx;
          border: 1rpx solid #ededed;
          border-radius: 33rpx 33rpx 33rpx 33rpx;

          &.disabled {
            color: #ededed;
          }
        }
        .view-qc-report {
          //background-color: #999;
          //color: white;
          color: #ccc;
          background-color: #eee;
        }

        .satisfaction-rating {
          margin-left: 24px;
          color: #3598ff;
          border-color: #3598ff;
        }
      }
    }
  }
}
